<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0"><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />   
        <title>Welcome to Design Zone......</title>
        <link rel="stylesheet" type="text/css" href="../../scripts/ext/resources/css/ext-all.css" />
		<link rel="stylesheet" type="text/css" href="../../scripts/ext/resources/css/file-upload.css" />
        <link rel="stylesheet" type="text/css" href="../../styles/dzbase.css" />
        <script type="text/javascript" src="../../scripts/ext/adapter/ext-base.js">
        </script>
        <script type="text/javascript" src="../../scripts/ext/ext-all.js">
        </script>
        <script type="text/javascript" src="../../scripts/menu/EditableItem.js">
        </script>
        <script type="text/javascript" src="../../scripts/menu/RangeMenu.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/GridFilters.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/Filter.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/StringFilter.js">
        </script>
		<script type="text/javascript" src="../../scripts/grid/filter/ListFilter.js">
        </script>
		<script type="text/javascript" src="../../scripts/form/FileUploadField.js">
        </script>
		<script type="text/javascript" src="../../scripts/grid/RowExpander.js">
        </script>
        <script type="text/javascript" src="../../scripts/i18nMessage.js">
        </script>
        <script type="text/javascript" src="../../scripts/utils.js">
        </script>
		<script type="text/javascript" src="../../scripts/selectBiFactory.js">
        </script>
		<script type="text/javascript" src="../../scripts/selectBiArmor.js">
        </script>
        <script type="text/javascript">
            var swatchMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.swatch');
			var yarnMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.yarn');
			var armorMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.armor'); 
			var fcMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.factory');
			var dzColorMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.dzcolor');
            var message = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=message');
			
			var ctSwatchTypeXmlLoader = new xmlLoader('../../servlet/CodeTableServlet?name=CtSwatchType');
			var ctFilsTypeXmlLoader = new xmlLoader('../../servlet/CodeTableServlet?name=CtFilsType');
			var ctYarnMaterialXmlLoader = new xmlLoader('../../servlet/CodeTableServlet?name=CtYarnMaterial');
            
			var ctSwatchTypeStore;
			var ctFilsTypeStore;
			var ctYarnMaterialStore
			
			var ctSwatchTypeCombo;
			var ctFilsTypeCombo;
			var ctYarnMaterialCombo1;
			var ctYarnMaterialCombo2;
			var ctYarnMaterialCombo3;
			var ctYarnMaterialCombo4;
			var ctYarnMaterialCombo5;
			
			var selectFactoryCallback = function(factoryId, factoryName){
				document.getElementById('factoryId').value = factoryId;
				document.getElementById('factoryName').value = factoryName;
			}
			var selectArmorCallback = function(armorId, armorReference){
				document.getElementById('armorId').value = armorId;
				document.getElementById('armorReference').value = armorReference;
			}
			
			var setReference = function(){
				if(ctSwatchTypeCombo.getValue() == null || ctSwatchTypeCombo.getValue() == ''){
					return;
				}
				var ctSwatchType = ctSwatchTypeCombo.getRawValue();
				var maxReferenceIndextXmlLoader = new xmlLoader('../../servlet/BiSwatchServlet?action=10&ctSwatchType=' + ctSwatchTypeCombo.getValue());
				var maxIndex = maxReferenceIndextXmlLoader.getValueByTagName('item');
				//alert(maxIndex);
				document.getElementById('referenceIndex').value = maxIndex;
				document.getElementById('reference').value = 'SW-' + ctSwatchType.substring(ctSwatchType.length-2) + '-' + maxIndex;
			}
			
            Ext.onReady(function(){
                Ext.QuickTips.init();
                
                Ext.form.Field.prototype.msgTarget = 'side';
                
                var idValue = getPrarmeterValue(window.location, 'id');
                var startPage = getPrarmeterValue(window.location, 'startPage');
                
                var idValue = getPrarmeterValue(window.location, 'id');
                var startPage = getPrarmeterValue(window.location, 'startPage');
				
				ctSwatchTypeStore = new Ext.data.Store({
                   
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'code',
                        totalRecords: 'itemTotal'
                    }, [
                    'code', 'description']),
					data: ctSwatchTypeXmlLoader.getXml()
                });
				
				ctFilsTypeStore = new Ext.data.Store({
                   
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'code',
                        totalRecords: 'itemTotal'
                    }, [
                    'code', 'description']),
					data: ctFilsTypeXmlLoader.getXml()
                });
				
				ctYarnMaterialStore = new Ext.data.Store({
	                reader: new Ext.data.XmlReader({
	                    record: 'item',
	                    id: 'code',
	                    totalRecords: 'itemTotal'
	                }, [ 
	                'code', 'description']),
					data: ctYarnMaterialXmlLoader.getXml()
	            });
				
				ctSwatchTypeCombo = new Ext.form.ComboBox({
					fieldLabel: swatchMessage.get('ui.swatch.type'),
					id: 'ctSwatchType',
					name: 'ctSwatchType',
					editable: false,
				    store: ctSwatchTypeStore,
					allowBlank: false,
                    blankText: message.get('message.edit.noblank'),
					valueField: 'code',
				    displayField:'description',
				    triggerAction: 'all',
				    emptyText: message.get('message.combo.pleaseselect'),
				    selectOnFocus:true,
					anchor: '90%',
					mode: 'local',
					listeners: {
						select: {
							fn: function (thisCombo, record,index){
								setReference();
							}
						}
					}
				});
				
				ctFilsTypeCombo = new Ext.form.ComboBox({
					fieldLabel: dzColorMessage.get('ui.dzcolor.yarntype'),
					id: 'ctFilsType',
					name: 'ctFilsType',
					allowBlank: false,
                    blankText: message.get('message.edit.noblank'),
					editable: false,
					valueField: 'code',
				    store: ctFilsTypeStore,
				    displayField:'description',
				    triggerAction: 'all',
				    emptyText: message.get('message.combo.pleaseselect'),
				    selectOnFocus:true,
					mode: 'local',
					anchor: '90%'
				});
				
				
				ctYarnMaterialCombo1 = new Ext.form.ComboBox({
					fieldLabel: yarnMessage.get('ui.yarn.material') + '1',
					id: 'ctYarnMaterial1',
					name: 'ctYarnMaterial1',
					editable: false,
				    store: ctYarnMaterialStore,
					valueField: 'code',
				    displayField:'description',
				    triggerAction: 'all',
				    emptyText: message.get('message.combo.pleaseselect'),
				    selectOnFocus:true,
					anchor: '90%',
					mode: 'local'
				});
				
				ctYarnMaterialCombo2 = new Ext.form.ComboBox({
					fieldLabel: yarnMessage.get('ui.yarn.material') + '2',
					id: 'ctYarnMaterial2',
					name: 'ctYarnMaterial2',
					editable: false,
				    store: ctYarnMaterialStore,
					valueField: 'code',
				    displayField:'description',
				    triggerAction: 'all',
				    emptyText: message.get('message.combo.pleaseselect'),
				    selectOnFocus:true,
					anchor: '90%',
					mode: 'local'
				});
				
				ctYarnMaterialCombo3 = new Ext.form.ComboBox({
					fieldLabel: yarnMessage.get('ui.yarn.material') + '3',
					id: 'ctYarnMaterial3',
					name: 'ctYarnMaterial3',
					editable: false,
				    store: ctYarnMaterialStore,
					valueField: 'code',
				    displayField:'description',
				    triggerAction: 'all',
				    emptyText: message.get('message.combo.pleaseselect'),
				    selectOnFocus:true,
					anchor: '90%',
					mode: 'local'
				});
				
				ctYarnMaterialCombo4 = new Ext.form.ComboBox({
					fieldLabel: yarnMessage.get('ui.yarn.material') + '4',
					id: 'ctYarnMaterial4',
					name: 'ctYarnMaterial4',
					editable: false,
				    store: ctYarnMaterialStore,
					valueField: 'code',
				    displayField:'description',
				    triggerAction: 'all',
				    emptyText: message.get('message.combo.pleaseselect'),
				    selectOnFocus:true,
					anchor: '90%',
					mode: 'local'
				});
				
				ctYarnMaterialCombo5 = new Ext.form.ComboBox({
					fieldLabel: yarnMessage.get('ui.yarn.material') + '5',
					id: 'ctYarnMaterial5',
					name: 'ctYarnMaterial5',
					editable: false,
				    store: ctYarnMaterialStore,
					valueField: 'code',
				    displayField:'description',
				    triggerAction: 'all',
				    emptyText: message.get('message.combo.pleaseselect'),
				    selectOnFocus:true,
					anchor: '90%',
					mode: 'local'
				});
				
                
                var swatchForm = new Ext.FormPanel({
					fileUpload: true,
                    labelAlign: 'left',
                    url: '../../servlet/BiSwatchServlet?action=1',
                    frame: true,
                    title: swatchMessage.get('ui.swatch.edittitle'),
                    bodyStyle: 'padding:5px 5px 5px 5px;margin-top: 2px;',
                    width: '100%',
                    labelWidth: 125,
                    reader: new Ext.data.XmlReader({
                        record: 'item'
                    }, [{
                        name: 'id',
                        mapping: 'id'
                    },{
						name: 'reference',
						mapping: 'reference'
					},{
						name: 'referenceIndex',
						mapping: 'referenceIndex'
					},{
						name: 'ctSwatchType',
						mapping: 'ctSwatchType'
					},{
						name: 'ctFilsType',
						mapping: 'ctFilsType'
					},{
						name: 'factoryId',
						mapping: 'factoryId'
					},{
						name: 'factoryName',
						mapping: 'factoryName'
					},{
						name: 'armorId',
						mapping: 'armorId'
					},{
						name: 'armorReference',
						mapping: 'armorReference'
					},{
						name: 'ctYarnMaterial1',
						mapping: 'ctYarnMaterial1'
					},{
						name: 'ctYarnMaterial2',
						mapping: 'ctYarnMaterial2'
					},{
						name: 'ctYarnMaterial3',
						mapping: 'ctYarnMaterial3'
					},{
						name: 'ctYarnMaterial4',
						mapping: 'ctYarnMaterial4'
					},{
						name: 'ctYarnMaterial5',
						mapping: 'ctYarnMaterial5'
					},{
						name: 'composition1',
						mapping: 'composition1'
					},{
						name: 'composition2',
						mapping: 'composition2'
					},{
						name: 'composition3',
						mapping: 'composition3'
					},{
						name: 'composition4',
						mapping: 'composition4'
					},{
						name: 'composition5',
						mapping: 'composition5'
					},{
						name: 'photo1Name',
						mapping: 'photo1Name'
					},{
						name: 'photo2Name',
						mapping: 'photo2Name'
					},{
						name: 'photo3Name',
						mapping: 'photo3Name'
					},{
						name: 'photo4Name',
						mapping: 'photo4Name'
					},{
						name: 'commentFr',
						mapping: 'commentFr'
					},{
						name: 'commentCn',
						mapping: 'commentCn'
					},{
						name: 'commentEn',
						mapping: 'commentEn'
					}]),
                    items: [{
                        id: 'id',
                        name: 'id',
                        xtype: 'hidden'
                    },{
                        id: 'referenceIndex',
                        name: 'referenceIndex',
                        xtype: 'hidden'
                    },{
                        id: 'photo1Name',
                        name: 'photo1Name',
                        xtype: 'hidden'
                    },{
                        id: 'photo2Name',
                        name: 'photo2Name',
                        xtype: 'hidden'
                    },{
                        id: 'photo3Name',
                        name: 'photo3Name',
                        xtype: 'hidden'
                    },{
                        id: 'photo4Name',
                        name: 'photo4Name',
                        xtype: 'hidden'
                    }, {
						id: 'factoryId',
						name: 'factoryId',
						xtype: 'hidden'
					},{
						id : 'armorId',
						name : 'armorId',
						xtype: 'hidden'
					},{
						layout: 'column',
						items: [{
							columnWidth:.3,
			                layout: 'form',
							items: [ctSwatchTypeCombo, {
									id: 'reference',
                                    name: 'reference',
                                    fieldLabel: message.get('message.edit.reference'),
                                    xtype: 'textfield',
                                    anchor: '86%',
									width: '90%',
                                    allowBlank: false,
                                    blankText: message.get('message.edit.noblank'),
                                    maxLength: 64
                                }]
						},{
							columnWidth:.3,
			                layout: 'form',
							items: [ctFilsTypeCombo,{
									id: 'factoryName',
                                    name: 'factoryName',
                                    fieldLabel: fcMessage.get('ui.factory.name'),
                                    xtype: 'textfield',
                                    anchor: '90%',
									width: '90%',
                                    allowBlank: false,
                                    blankText: message.get('message.edit.noblank'),
									emptyText: message.get('message.combo.pleaseselect'),
									readOnly: true,
                                    maxLength: 64,
									listeners: {
                                        'render': {
                                            fn: function(){
                                                Ext.getCmp('factoryName').getEl().on('click', function(){
                                                    selectFactory();
                                                }, this);
                                            },
                                            scope: this
                                        }
                                    }
                                }]
						},{
							columnWidth:.3,
			                layout: 'form',
							items: [{
									id: 'armorReference',
                                    name: 'armorReference',
                                    fieldLabel: armorMessage.get('ui.armor.armor'),
                                    xtype: 'textfield',
                                    anchor: '90%',
									width: '90%',
                                    allowBlank: false,
                                    blankText: message.get('message.edit.noblank'),
									emptyText: message.get('message.combo.pleaseselect'),
									readOnly: true,
                                    maxLength: 64,
									listeners: {
                                        'render': {
                                            fn: function(){
                                                Ext.getCmp('armorReference').getEl().on('click', function(){
                                                    selectArmor();
                                                }, this);
                                            },
                                            scope: this
                                        }
                                    }
                                }]
						}]
                    },{
							xtype: 'fieldset',
							collapsible: true,
							title: yarnMessage.get('ui.yarn.composition'),
							autoHeight: true,
							items: [{
	                            layout: 'column',
	                            items: [{
	                                columnWidth: .5,
	                                layout: 'form',
	                                items: [ctYarnMaterialCombo1, ctYarnMaterialCombo2, ctYarnMaterialCombo3, ctYarnMaterialCombo4, ctYarnMaterialCombo5]
								
								},{
	                                columnWidth: .5,
	                                layout: 'form',
	                                items: [{
										id: 'composition1',
	                                    name: 'composition1',
	                                    fieldLabel: yarnMessage.get('ui.yarn.composition') + '1&nbsp;(%)',
	                                    xtype: 'numberfield',
	                                    anchor: '86%',
										width: '90%',
	                                    maxLength: 64
	                                },{
										id: 'composition2',
	                                    name: 'composition2',
	                                    fieldLabel: yarnMessage.get('ui.yarn.composition') + '2&nbsp;(%)',
	                                    xtype: 'numberfield',
	                                    anchor: '86%',
										width: '90%',
	                                    maxLength: 64
	                                },{
										id: 'composition3',
	                                    name: 'composition3',
	                                    fieldLabel: yarnMessage.get('ui.yarn.composition') + '3&nbsp;(%)',
	                                    xtype: 'numberfield',
	                                    anchor: '86%',
										width: '90%',
	                                    maxLength: 64
	                                },{
										id: 'composition4',
	                                    name: 'composition4',
	                                    fieldLabel: yarnMessage.get('ui.yarn.composition') + '4&nbsp;(%)',
	                                    xtype: 'numberfield',
	                                    anchor: '86%',
										width: '90%',
	                                    maxLength: 64
	                                },{
										id: 'composition5',
	                                    name: 'composition5',
	                                    fieldLabel: yarnMessage.get('ui.yarn.composition') + '5&nbsp;(%)',
	                                    xtype: 'numberfield',
	                                    anchor: '86%',
										width: '90%',
	                                    maxLength: 64
	                                }]
								}]
							}]
						},{
						xtype: 'fileuploadfield',
						width: '80%',
			            id: 'photo1',
						name: 'photo1',
			            emptyText: message.get('message.edit.selectimage'),
			            fieldLabel: message.get('message.edit.photo') + '1',
			            buttonCfg: {
			                text: '',
			                iconCls: 'uploadIcon'
		            	}
					},{
						xtype: 'fileuploadfield',
						width: '80%',
			            id: 'photo2',
						name: 'photo2',
			            emptyText: message.get('message.edit.selectimage'),
			            fieldLabel: message.get('message.edit.photo') + '1',
			            buttonCfg: {
			                text: '',
			                iconCls: 'uploadIcon'
		            	}
					},{
						xtype: 'fileuploadfield',
						width: '80%',
			            id: 'photo3',
						name: 'photo3',
			            emptyText: message.get('message.edit.selectimage'),
			            fieldLabel: message.get('message.edit.photo') + '1',
			            buttonCfg: {
			                text: '',
			                iconCls: 'uploadIcon'
		            	}
					},{
						xtype: 'fileuploadfield',
						width: '80%',
			            id: 'photo4',
						name: 'photo4',
			            emptyText: message.get('message.edit.selectimage'),
			            fieldLabel: message.get('message.edit.photo') + '1',
			            buttonCfg: {
			                text: '',
			                iconCls: 'uploadIcon'
		            	}
					},{
						fieldLabel: message.get('message.edit.descriptionfr'),
                        name: 'commentFr',
                        xtype: 'textarea',
                        maxLength: 512,
						width: '90%',
                        maxLengthText: message.get('message.edit.toolong')
					},{
						fieldLabel: message.get('message.edit.descriptioncn'),
                        name: 'commentCn',
                        xtype: 'textarea',
                        maxLength: 512,
						width: '90%',
                        maxLengthText: message.get('message.edit.toolong')
					},{
						fieldLabel: message.get('message.edit.descriptionen'),
                        name: 'commentEn',
                        xtype: 'textarea',
                        maxLength: 512,
						width: '90%',
                        maxLengthText: message.get('message.edit.toolong')
					}],
                    
                    buttons: [{
                        text: message.get('message.edit.save'),
                        handler: function(){
                            if (swatchForm.getForm().isValid()) {
                            	
                            	if(idValue == null){
                            		setReference();
                            	}
                            	
								document.getElementsByName('ctSwatchType')[0].value = ctSwatchTypeCombo.getValue();
								document.getElementsByName('ctFilsType')[0].value = ctFilsTypeCombo.getValue();
								
								document.getElementsByName('ctYarnMaterial1')[0].value = ctYarnMaterialCombo1.getValue();
								document.getElementsByName('ctYarnMaterial2')[0].value = ctYarnMaterialCombo2.getValue();
								document.getElementsByName('ctYarnMaterial3')[0].value = ctYarnMaterialCombo3.getValue();
								document.getElementsByName('ctYarnMaterial4')[0].value = ctYarnMaterialCombo4.getValue();
								document.getElementsByName('ctYarnMaterial5')[0].value = ctYarnMaterialCombo5.getValue();
							
                                swatchForm.getForm().submit({
                                    method: 'post',
                                    success: function(form, action){
                                        messageTip.msg(message.get('message.tip'), message.get('message.edit.successful'));
										document.getElementById('photo1-file').value = null;
										document.getElementById('photo2-file').value = null;
										document.getElementById('photo3-file').value = null;
										document.getElementById('photo4-file').value = null;
                                        swatchForm.getForm().reset();
                                    },
                                    failure: function(form, action){
                                        messageTip.msg(message.get('message.tip'), message.get('message.edit.unsuccessful'));
                                    }
                                });
                            }
                        }
                    }, {
                        text: message.get('message.edit.reset'),
                        handler: function(){
                            swatchForm.getForm().reset();
                        }
                    }, {
                        text: message.get('message.edit.cancel'),
                        handler: function(){
                            if (startPage != null) {
                                window.location = 'swatch_list.html?startPage=' + startPage;
                            }
                            else {
                                window.location = 'swatch_list.html';
                            }
                        }
                    }]
                })
                
                swatchForm.render('swatchDiv');
				
				new Ext.Resizable('customImg', {
                    wrap: true,
                    pinned: true,
                    dynamic: true,
                    handles: 'all',
                    draggable: true
                });
                
                new Ext.Resizable('customImg1', {
                    wrap: true,
                    pinned: true,
                    dynamic: true,
                    handles: 'all',
                    draggable: true
                });
				
				new Ext.Resizable('customImg2', {
                    wrap: true,
                    pinned: true,
                    dynamic: true,
                    handles: 'all',
                    draggable: true
                });
                
                new Ext.Resizable('customImg3', {
                    wrap: true,
                    pinned: true,
                    dynamic: true,
                    handles: 'all',
                    draggable: true
                });
                
                if (idValue != null) {
                    document.getElementById('id').value = idValue;
                    swatchForm.getForm().load({
                        url: '../../servlet/BiSwatchServlet?action=3&id=' + idValue,
                        waitMsg: Ext.LoadMask.prototype.msg,
                        success: function(form, action){
                            document.getElementById('customImg').src =  '../../_temp/' + document.getElementById('photo1Name').value;
							document.getElementById('customImg1').src =  '../../_temp/' + document.getElementById('photo2Name').value;
							document.getElementById('customImg2').src =  '../../_temp/' + document.getElementById('photo3Name').value;
							document.getElementById('customImg3').src =  '../../_temp/' + document.getElementById('photo4Name').value;
                        }
                    });
                }
                
            });
        </script>
    </head>
    <body>
        <div id="swatchDiv">
        </div>
		<img id="customImg" src="../../_temp/noimage.gif" style="position:absolute;left: 0%;width: 250px;"/>
		<img id="customImg1" src="../../_temp/noimage.gif" style="position:absolute;left: 25%;width: 250px;"/>
		<img id="customImg2" src="../../_temp/noimage.gif" style="position:absolute;left: 50%;width: 250px;"/>
		<img id="customImg3" src="../../_temp/noimage.gif" style="position:absolute;left: 75%;width: 250px;"/>
    </body>
</html>
